<template>
	<div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>帐号管理</h6>
					</div>

					<div class="panel-body">
						<div style="float: right; margin-bottom: 10px;">

							<button type="button" class="btn btn-warning " @click="addAccount('新增帐号')">新增帐号</button>
							<!--<button type="button" class="btn btn-info" @click="setPower()">权限分配</button>-->
						</div>
						<div class="clearfix"></div>

						<div class="table-responsive">
							<table class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
								<tr>
									<!--<th style="min-width: 10px;">
										<label>
											<input type="checkbox">
										</label>
									</th>-->
									<th>登录帐号</th>
									<th>公司名称</th>
									<th>联系人</th>
									<th>联系电话</th>
									<th>邮箱</th>
									<th>日期</th>
									<th>备注</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(items, index) in accountList.result">
									<!--<td>
										<label>
											<input type="checkbox" name="check">
										</label>
									</td>-->
									<td>{{ items.username }}</td>
									<td>{{ items.company }}</td>
									<td>{{ items.description }}</td>
									<td>{{ items.phone }}</td>
									<td>{{ items.email }}</td>
									<td>{{ items.registration }}</td>
									<td>{{ items.remarks }}</td>
									<td>
										<a class="label label-success" @click="accountEdit('编辑帐号', items.username)">编辑</a>
										<a class="label label-warning" @click="accountCol(items.username)">{{ items.status == 'A' ? '冻结':'开启' }}</a>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<lsc-page
							mode="event"
							:totalPage="pages"
							:init-page="eventPage"
							:eventFunt="eventFunt"
							@go-page="goPage"></lsc-page>
		</div>

		<!-- Modal Dialog -->
		<div class="modal fade" id="myModalNew">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title bk-fg-primary">{{guestTitle}}</h4>
					</div>
					<div class="modal-body">
						<div class="panel-body">
							<div class="form-horizontal ">
								<div class="form-group">
									<label class="col-md-3 control-label">登录角色</label>
									<div class="col-md-9">
										<select class="form-control" id="ccmonth-w2" v-model="role">
											<option value="ROLE_SALES_DIRECTOR">运营总监</option>
											<option value="ROLE_SALES">业务员</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">登录帐号</label>
									<div class="col-md-9">
										<input type="tel" maxlength="11" name="text-input" class="form-control" placeholder="手机号码" v-model="username" @blur="checkValue">
									</div>
								</div>
								<div class="form-group" v-if="showPwd">
									<label class="col-md-3 control-label">密码</label>
									<div class="col-md-9">
										<input type="test" maxlength="16" name="text-input" class="form-control" v-model="password">
										<span class="help-block">初始密码：12345678</span>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">联系人</label>
									<div class="col-md-9">
										<input type="text" name="text-input" class="form-control" placeholder="联系人" v-model="description">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">联系电话</label>
									<div class="col-md-9">
										<input type="tel" name="text-input" class="form-control" placeholder="手机号码、固话" v-model="phone">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">邮箱</label>
									<div class="col-md-9">
										<input type="email" name="text-input" class="form-control" placeholder="邮箱" v-model="email" @blur="checkValue">
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">备注</label>
									<div class="col-md-9">
										<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="备注" v-model="remarks"></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 control-label">&nbsp;</label>
									<div class="col-md-9 tipsColor">
										{{infoTips}}
									</div>
								</div>
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" @click="accountSave(showPwd)">提交</button>
					</div>
				</div>
			</div>
		</div>
		<!-- End Modal Dialog -->

		<!-- Modal Dialog -->
		<div class="modal fade" id="myModalPower">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title bk-fg-primary">分配权限</h4>
					</div>
					<div class="modal-body">
						<div class="panel-body">
							<div class="form-group">
								<div class="col-sm-8">

									<div class="checkbox-custom checkbox-success">
										<input type="checkbox" name="procheck" id="cardinfo">
										<label for="cardinfo">卡信息</label>
									</div>

									<div class="checkbox-custom checkbox-warning" @click="setOrder">
										<input type="checkbox" name="procheck" id="orderinfo">
										<label for="orderinfo">订单管理</label>
									</div>

									<div class="order-set">

										<div class="checkbox-custom checkbox-success">
											<input type="checkbox" name="procheck" id="allorder">
											<label for="allorder">所有订单</label>
										</div>

										<div class="checkbox-custom checkbox-success">
											<input type="checkbox" name="procheck" id="packetorder">
											<label for="packetorder">叠加包订单</label>
										</div>
									</div>

									<div class="checkbox-custom checkbox-success">
										<input type="checkbox" name="procheck" id="billinfo">
										<label for="billinfo">账单管理</label>
									</div>

									<div class="checkbox-custom checkbox-success">
										<input type="checkbox" name="procheck"  id="geustbillinfo">
										<label for="geustbillinfo">账单管理（客户）</label>
									</div>

									<div class="checkbox-custom checkbox-success">
										<input type="checkbox" name="procheck"  id="accountinfo">
										<label for="accountinfo">帐号管理</label>
									</div>

									<div class="checkbox-custom checkbox-success">
										<input type="checkbox" name="procheck"  id="geustinfo">
										<label for="geustinfo">客户管理</label>
									</div>

								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-warning" v-show="!showCheck" @click="setCheckAll">全选</button>
						<button type="button" class="btn btn-default" v-show="showCheck" @click="clearCheckAll">反选</button>
						<button type="button" class="btn btn-primary">提交</button>
					</div>
				</div>
			</div>
		</div><!-- End Modal Dialog -->

	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				accountList: 'getAccountList',
				accountInfo: 'getAccountInfo'
			}),
			pages () {
				if(this.accountList.pageInfo){
					return this.accountList.pageInfo.totalPage
				}
			}
		},
		data () {
			return {
				eventPage: 1,
				guestTitle: '新增帐号',
				eventFunt: 'fetchAccount',
				showCheck: false,

				role: '',
				username: '',
				password: '12345678',  // 初始化密码
				description: '',
				phone: '',
				email: '',
				remarks: '',
				infoTips: '', // 必填提示
				showPwd: 1 , // 编辑状态下隐藏（为0)

			}
		},
		methods: {

			goPage (data) {
				this.eventPage = data.page
			},

			addAccount (title) {

				this.infoTips = ''
				if(title === '新增帐号'){
					this.showPwd = 1
					this.guestTitle = title
				}
				// 初始化
				this.role = ''
				this.username = ''
				this.password = '12345678'
				this.description = ''
				this.phone = ''
				this.email = ''
				this.remarks = ''

				$('#myModalNew').modal('show')
			},

			setPower (title) {
				$('#myModalPower').modal('show')
			},

			setOrder () {
				if($('#orderinfo').is(':checked')){
					$("#orderinfo").prop("checked","checked");
					$('.order-set').find('input').prop("checked","checked");
				}else{
					$("#orderinfo").prop("checked","");
					$('.order-set').find('input').prop("checked","");
				}
			},

			setCheckAll () {
				this.showCheck = true
				$("input[name='procheck']").prop("checked", "checked");
			},

			clearCheckAll () {
				this.showCheck = false
				$("input[name='procheck']").prop("checked", "");
			},

			accountSave (isAdd) {

				let params = {
					role:         this.role,
					username:     this.username,
					description:  this.description,
					phone:        this.phone,
					email:        this.email,
					remarks:      this.remarks
				}

				if(!this.role){
					this.infoTips = '登录角色不能为空'
					return
				}
				if(!this.username){
					this.infoTips = '登录帐号不能为空'
					return
				}
				if(!this.password && this.showPwd){
					this.infoTips = '登录密码不能为空'
					return
				}
				if(!this.description){
					this.infoTips = '联系人不能为空'
					return
				}
				if(!this.phone){
					this.infoTips = '联系电话不能为空'
					return
				}

				if(isAdd) {
					params.password = this.password
					this.$store.dispatch('fetchAccountAdd', params)
				}else{
					this.showPwd = 1
					this.$store.dispatch('fetchAccountEdit', params)
				}
				$('#myModalNew').modal('hide')
			},

			accountEdit (title, username) {

				if(title === '编辑帐号'){
					this.showPwd = 0
					this.guestTitle = title
				}

				this.$store.dispatch('fetchAccountInfo', {name: username})
				$('#myModalNew').modal('show')
			},

			accountCol (username) {
				this.$store.dispatch('fetchAccountDel', {username: username})
			},

			checkValue () {

				if(this.email) {
					let patrn = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
					if (!patrn.exec(this.email)) {
						this.email = ''
						alert('请输入正确的电子邮箱')
						return
					}
				}

				if(this.username) {
					if(new RegExp("^((1[0-9]))[0-9]{9,9}$").test(this.username) == false){
						this.username = ''
						alert('请输入正确的手机号码作为登录帐号')
						return
					}
				}

			}
		},
		mounted () {

			this.$store.dispatch('fetchAccount', {page: 1})

		},
		components: {
			LscPage
		},
		watch: {
			accountInfo (newVal) {

				this.role = newVal.result.role
				this.username = newVal.result.username
				this.password = newVal.result.password
				this.description = newVal.result.description
				this.phone = newVal.result.phone
				this.email = newVal.result.email
				this.remarks = newVal.result.remarks
			},
			accountList (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
			}
		}
	}


</script>

<style>
	.order-set {
		padding: 0 20px 20px 20px;
	}
</style>
